import { Button, Checkbox, Form, Input, Row, Col, message as antdMessage } from 'antd';
import React from 'react';
import style from './style.module.css'
import signinBack from '../../assets/signin-back.webp'
import { signin } from '../../api';
import { useNavigate } from 'react-router-dom';
import { useDispatch } from 'react-redux'
const App: React.FC = () => {
	const navigate = useNavigate()
	const dispatch = useDispatch()
	const onFinish = async (values: { username: string, password: string }) => {
		// 请求登录
		const { code, data, message } = await signin(values);
		// code === 0  成功
		if (code === 0) {
			// 弹出提示
			antdMessage.success(message);
			// 保存用户信息
			dispatch({ type: 'loginSuccess', payload: data })
			// 本地
			localStorage.setItem('token', data.token)
			// 路由跳转...
			navigate('/home')
		}
	};

	const onFinishFailed = (errorInfo: any) => {
		console.log('Failed:', errorInfo);
	};

	return (
		<div>
			<img src={signinBack} alt="" className={style['back']} />
			<div className={style['signin-box']}>
				<Form
					name="basic"
					labelCol={{ span: 4 }}
					wrapperCol={{ span: 20 }}
					initialValues={{ remember: true }}
					onFinish={onFinish}
					onFinishFailed={onFinishFailed}
					autoComplete="off"
				>
					<Form.Item
						wrapperCol={{ span: 24 }}>
						<Row>
							<Col span={4}></Col>
							<Col span={20}>
								<h1 className={style['center']}>用户登录</h1>
							</Col>
						</Row>
					</Form.Item>
					<Form.Item
						label="用户名"
						name="username"
						rules={[{ required: true, message: '请输入用户名' }]}
					>
						<Input />
					</Form.Item>

					<Form.Item
						label="密码"
						name="password"
						rules={[{ required: true, message: '请输入密码' }]}
					>
						<Input.Password />
					</Form.Item>


					<Form.Item wrapperCol={{ offset: 4, span: 20 }}>
						<Button type="primary" htmlType="submit" block>
							登录
						</Button>
					</Form.Item>
				</Form>
			</div>
		</div>
	);
};

export default App;